import React, { Component } from 'react'
import axios from "../../../util/axios"
import { connect } from "react-redux"
import { RouteComponentProps } from "react-router-dom"
import { lclass, rclass } from "../../../types/index"
interface IProps extends RouteComponentProps {
    initLdata: (list: lclass) => void,
    initRdata: (list: rclass) => void
    ldata: lclass[],
    rdata: rclass[],
}
class Classify extends Component<IProps, {}>{
    componentDidMount() {
        if (this.props.ldata.length <= 0) {
            axios.get('/api/lclassify').then(res => {
                if (res.data.code === 1) {
                    this.props.initLdata(res.data.data)
                }
            })
            axios.post('/api/rclassify',{
                id:1
            }).then(res=>{
                this.props.initRdata(res.data.data)
            })
        }
    }
    click = (id: number) => {
        axios.post('/api/rclassify', {
            id: id
        }).then(res => {
            this.props.initRdata(res.data.data)
        })
    }
    goteil=(id:number)=>[
        this.props.history.push('/home/detail/'+id)
    ]
    render() {
        let { ldata, rdata } = this.props;
        return (
            <div className="classify-page wrap">
                <header></header>
                <main>
                    <div className="left">
                        {
                            ldata.map((item: lclass) => {
                                return <p className="lnav" key={item.id} onClick={() => { this.click(item.id) }}>{item.title}</p>
                            })
                        }
                    </div>
                    <div className="right">
                        {
                            rdata.map((item: rclass) => {
                                return (
                                    <div key={item.title}>
                                        <h3>{item.title}</h3>
                                        <div className="item">
                                            {
                                                item.list.map((ite: rclass) => {
                                                    return <dl className="dl-item" key={ite.id}>
                                                        <dt onClick={()=>this.goteil(ite.id)}>{ite.img}</dt>
                                                        <dd>
                                                            <p>{ite.title}</p>
                                                        </dd>
                                                    </dl>
                                                })
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </main>
            </div>
        )
    }
}
let stateMapToProps = (state: any) => {
    console.log(state)
    return {
        ldata: state.list.leftList,
        rdata: state.list.rightList
    }
}
let DispatchMapToProps = (dispatch: any) => {
    return {
        initLdata(list: lclass) {
            dispatch({ type: "LEFT_NAV", list })
        },
        initRdata(list: rclass) {
            dispatch({ type: "RIGHT_SHOP", list })
        }
    }
}
export default connect(stateMapToProps, DispatchMapToProps)(Classify)
